<!--重修酬金明细-->
<template>
  <div class="edu-page-warp">
    <!-- 列表查询条件 -->
    <condition-card @reset="reset" @search="onSubmit">
      <el-form ref="queryForm" label-suffix="：" :model="queryForm" label-position="right" label-width="130px">
        <el-row :span="24">
          <el-col :span="8">
            <el-form-item :label="$t('label.schoolTerm')">
              <CalendarSelect v-model="queryForm.calendarId" @load-done="loadDone"></CalendarSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('label.college')">
              <el-select v-model="queryForm.faculty" style="width: 100%" clearable filterable :placeholder="$t('common.text.all')">
                <el-option v-for="item in options.colleges" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('repairFee.courseNoOrName')">
              <el-input v-model="queryForm.keyWord" :clearable="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </condition-card>
    <!--列表信息-->
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('repairFee.collegeTitle')}}</div>
      <el-row style="margin-bottom:16px">
        <el-col :span="24">
          <div class="float-right">
            <el-button type="primary" @click="handleExport(2)">{{$t('message.export')}}</el-button>
          </div>
        </el-col>
      </el-row>
      <edu-table ref="tables" :data="data" :selection="false" :order="false" :total="total" @page-change="pageChange">
        <el-table-column min-width="80" :label="$t('repairFee.courseNo')" prop="courseNo" show-overflow-tooltip />
        <el-table-column min-width="120" :label="$t('repairFee.courseName')" prop="courseName" show-overflow-tooltip />
        <el-table-column width="80" :label="$t('repairFee.credit')" prop="credit" show-overflow-tooltip />
        <el-table-column min-width="140" :label="$t('repairFee.teachers')" prop="teachers" show-overflow-tooltip />
        <el-table-column width="80" :label="$t('repairFee.elcNumber')" prop="elcNumber" show-overflow-tooltip />
        <el-table-column width="80" :label="$t('repairFee.coefficient')" prop="coefficient" show-overflow-tooltip />
        <el-table-column width="90" :label="$t('repairFee.remark')" prop="remark" show-overflow-tooltip />
        <el-table-column min-width="80" :label="$t('repairFee.fee')" prop="fee" show-overflow-tooltip />
      </edu-table>
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <div class="edu-page-title float-right">
            <span style="align-content: center;margin-right:10px;">{{$t('repairFee.totalAmount')}}：{{this.countFees}} 元</span>
            <el-button type="primary" @click="handleReturn">{{$t('repairFee.back')}}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
    import {queryDic} from "common/src/api/dictionary";
    import UTILS from "common/src/utils/utils";
    import {repairFeeListByClass,exportRepairFee} from "common/src/api/repairFee";
    import examinationStudentsApi from "common/src/api/welcomeService/examinationStudents";
    import API from "common/src/api/graExamArrange/examArrangInfoQuery";

    export default {
        name: 'repairFeeDetail',
        components: {},
        props: {
            defaultQueryParam: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                defaultCalendarId: null,//默认学期，用于重置
                data: [],
                page: {
                    pageNum_: 1,
                    pageSize_: 20
                },
                total: 0,
                queryForm: {
                    calendarId: null, //学期
                    faculty: null, //学院
                    keyWord: '',
                    type: '' //导出类型
                },
                options: {
                    colleges: [],//学院
                },
                selectInfos: [],//列表勾选记录

            };
        },
        created() {
        },
        mounted() {
            this.init()
            if(this.defaultQueryParam){
                this.queryForm.calendarId=this.defaultQueryParam.calendarId
                this.queryForm.faculty=this.defaultQueryParam.faculty
            }
        },
        methods: {
            init(){
                let data = {
                    lang: this.$store.getters.language || "cn",
                    type: "allChild",
                    keys: ["X_YX"]
                };
                queryDic(data).then(res => {
                    if (res.code == 200 && res.data) {
                        UTILS.fillSelect({colleges: "X_YX"}, res.data, this.options);
                    }
                });
            },

            loadDone() {
                this.defaultCalendarId = this.queryForm.calendarId;
                this.onSubmit();
            },

            onSubmit() {  // 获取列表
                let params = {
                    ...this.page,
                    condition: this.queryForm
                };
                repairFeeListByClass(params).then(response => {
                    if (response.code === 200) {
                        //总酬金
                        this.countFees = !response.data.countFees ? 0:response.data.countFees
                        this.data = response.data.pageResult.list;
                        this.total = response.data.pageResult.total_;
                    } else throw response.code;
                });
            },

            // 分页切换功能
            pageChange(val) {
                [this.page.pageNum_, this.page.pageSize_] = [val.pageNum, val.pageSize];
                this.onSubmit();
            },

            reset() {
                Object.keys(this.queryForm).forEach(key => {
                    this.queryForm[key] = null;
                });
                if(this.defaultQueryParam){
                    this.queryForm.calendarId = this.defaultQueryParam.calendarId
                    this.queryForm.faculty = this.defaultQueryParam.faculty
                }else{
                    this.queryForm.calendarId = this.defaultCalendarId;
                }
                this.onSubmit();
            },

            handleReturn(){
                this.$emit("handleReturn");
            },

            handleExport() {
                let loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(255, 255, 255, .48)"
                });
                let param = _.cloneDeep(this.queryForm);
                param.type=2
                exportRepairFee(param).then(res => {
                    if (res.code == 200) {
                        this.delayRequest(res.data.key, loading);
                    } else {
                        loading.close();
                    }
                });
            },
            async delayRequest(key, loading) {
                await new Promise(resolve => setTimeout(resolve, 5000));
                API.getObsKey(key).then(res => {
                    if (res.code == 200 && res.data.status) {
                        let path = examinationStudentsApi.exportUrl + res.data.path;
                        window.location.href = path;
                        loading.close();
                    } else {
                        this.delayRequest(key, loading);
                    }
                }).catch(ex => {
                    console.error("重修酬金明细"+ key +"导出失败:",ex)
                });
            },
        }
    };
</script>
<style lang="scss" scoped>

</style>
